<template>
	<u-modal v-model="show" :show-title="false" @confirm="confirm">
		<view class="u-update-content">
			<view class="new">
				new
			</view>
			<view class="title">
				{{title}}
			</view>
			<image src="./up.png" mode=""></image>
			<u-line-progress :percent="percent" height="35" activeColor="#13AB7C" inactiveColor="#F3F9F9" ></u-line-progress>
			<view class="text">
				新版本正在努力的更新中，请稍等
			</view>
		</view>
	</u-modal>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				percent: 0,
				title: '新版本更新中'
			}
		},
		onReady() {
			this.show = true;
			var _this = this;
			uni.$on('update', function(data) {
				_this.percent = data.number;
				if (data.number == 100) {
					_this.title = "安装中"
				}
			})
		},
		methods: {
			confirm() {
				this.closeModal();
			},
			closeModal() {
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../../libs/css/style.components.scss";

	.u-full-content {
		background-color: #00C777;
	}

	.u-update-content {
		font-size: 26rpx;
		color: $u-content-color;
		line-height: 1.7;
		padding: 30rpx;

		.new {
			width: 73rpx;
			height: 31rpx;
			background: #FDC23B;
			border-radius: 5rpx;
			margin: auto;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.title {
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		image {
			width: 100%;
			height: 266rpx;
		}

		.text {
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
		}
	}
</style>
